{% extends "base.html" %}

{% block content %}
<div class="container">
    <h2>Datasets</h2>
    <table class="data-table">
        <thead>
            <tr>
                <th>Data ID</th>
                <th>Path</th>
                <th>Timestamp</th>
                <th>Status</th>
                <th>Operation</th>
            </tr>
        </thead>
        <tbody>
            {% for item in data %}
            <tr id="item-{{ loop.index }}">
                <td>{{ item.data_name }}</td>
                <td>{{ item.file_path }}</td>
                <td>{{ item.timestamp }}</td>
                <td id="status-{{ loop.index }}">
                    {% if item.status == 0 %}
                        Not Processed
                    {% else %}
                        Processed
                    {% endif %}
                </td>
                <td>
                    <a href="{{ url_for('download_model', filename=item.data_name) }}" class="btn btn-process">Download</a>
                    <button class="btn btn-process" onclick="processData('{{ item.data_name }}', {{ loop.index }})">Process</button>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
<script>
function processData(id, rowIndex) {
    // Simulate processing (AJAX call to server)
    // For demonstration, let's toggle between Not Processed and Processed
    var statusCell = document.getElementById('status-' + rowIndex);
    var currentStatus = statusCell.innerText.trim();

    if (currentStatus === 'Not Processed') {
        statusCell.innerText = 'Processed';
    } else {
        statusCell.innerText = 'Not Processed';
    }

    // Here you can make an actual AJAX call to update status on the server
    // Example:
    /*
    fetch('/update_status', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ data_id: id })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Update UI or show success message
        } else {
            // Handle error or show error message
        }
    })
    .catch(error => {
        console.error('Error processing data:', error);
        // Handle error or show error message
    });
    */
}
</script>
{% endblock %}
